import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Segment, Header, Image } from 'semantic-ui-react'
import { PrimaryButton } from 'components/Button'
import { push } from 'connected-react-router'
import Icons from 'utils/constents/icons'

const HolderView = ({ link, holder }) => (
  <Segment placeholder>
    <Header icon>
      <Image src={Icons.EMPTY} />
      {holder.description}
    </Header>
    {holder.action && (
      <PrimaryButton onClick={() => link(holder.action.url)}>{holder.action.text}</PrimaryButton>
    )}
  </Segment>
)

const mapDispatchToProps = {
  link: url => push(url),
}

export default connect(
  null,
  mapDispatchToProps,
)(HolderView)
